<template>
	<view class="content">
		<view class="cc-title">
			<image src="../../static/image/logo.png" mode=""></image>
			<text>上海师范大学附属杨浦现代职业学校</text>
			<text style="margin-left: 32%;">面试专业预报名</text>
		</view>
		<view class="user-title">
			<view class="user-top">填写信息</view>
			<view class="message-title required">
				<view class="mess-left">
					<!-- <image src="../../static/image/user.png" mode=""></image> -->
					<span>*</span>
					考生姓名:
				</view>
				<view class="" style="margin-left: 30rpx">
					<u--input
						placeholder="请输入考生姓名"
						border="none"
						v-model="form.name"
					></u--input>
				</view>
			</view>
			<u-line color="#EDEBEB"></u-line>
			<view class="message-title required">
				<view class="mess-left">
					<!-- <image src="../../static/image/idcard.png" mode=""></image> -->
					<span>*</span>
					考生身份证号:
				</view>
				<view class="" style="margin-left: 30rpx">
					<u--input
						placeholder="请输入考生身份证号"
						border="none"
						v-model="form.idcard"
						type="idcard"
						maxlength="18"
						@blur="idcardVaild"
					></u--input>
				</view>
			</view>
			<u-line color="#EDEBEB"></u-line>
			<view class="message-title required">
				<view class="mess-left">
					<span>*</span>
					中考考生报名号:
				</view>
				<view class="" style="margin-left: 30rpx">
					<u--input
						placeholder="请输入中考考生报名号"
						border="none"
						v-model="form.examinee_number"
						type="number"
						@blur="examineeNumberVaild"
					></u--input>
				</view>
			</view>
			<u-line color="#EDEBEB"></u-line>
			<view class="message-title required">
				<view class="mess-left">
					<span>*</span>
					学校所在区县:
				</view>
				<view class="" style="margin-left: 30rpx">
					<u--input
						placeholder="请输入初中学校所在区县"
						border="none"
						v-model="form.school_address"
					></u--input>
				</view>
			</view>
			<u-line color="#EDEBEB"></u-line>
			<view class="message-title required">
				<view class="mess-left">
					<span>*</span>
					初中学校名称:
				</view>
				<view class="" style="margin-left: 30rpx">
					<u--input
						placeholder="请输入初中学校名称"
						border="none"
						v-model="form.end_school"
					></u--input>
				</view>
			</view>
			<!-- <u-line color="#EDEBEB"></u-line>
			<view class="message-title required">
				<view class="mess-left">
					家庭地址邮编
					 <span>*</span>
				</view>
				<view class="" style="margin-left: 30rpx;">
					<u--input placeholder="请输入家庭地址邮编" border="none" v-model="form.post_code"></u--input>
				</view>
			</view> -->
			<u-line color="#EDEBEB"></u-line>
			<view class="message-title required">
				<view class="mess-left">
					<span>*</span>
					通信地址:
				</view>
				<view class="" style="margin-left: 30rpx">
					<u--input
						placeholder="请输入通信地址"
						border="none"
						v-model="form.address"
					></u--input>
				</view>
			</view>
			<u-line color="#EDEBEB"></u-line>
			<view class="message-title required">
				<view class="mess-left">
					<span>*</span>
					联系人手机号1:
				</view>
				<view class="" style="margin-left: 30rpx">
					<u--input
						placeholder="请输入联系人手机号1"
						border="none"
						v-model="form.father_mobile"
						maxlength="11"
					></u--input>
				</view>
			</view>
			<u-line color="#EDEBEB"></u-line>
			<view class="message-title required">
				<view class="mess-left">
					<span>*</span>
					联系人手机号2:
				</view>
				<view class="" style="margin-left: 30rpx">
					<u--input
						placeholder="请输入联系人手机号2"
						border="none"
						v-model="form.mother_mobile"
						maxlength="11"
					></u--input>
				</view>
			</view>
			<u-line color="#EDEBEB"></u-line>
			<!-- <view class="message-title required">
				<view class="mess-left">
					报考志愿:
					 <span>*</span>
				</view>
				<view class="" style="margin-left: 30rpx;">
					<u--input placeholder="请输入报考志愿" border="none" v-model="form.volunteer"></u--input>
				</view>
			</view> -->
		</view>
		<view class="cc-center">
			<view class="mess-left center-top">
				<view class="mess-left">
					<span style="color: red">*</span>
					考生类型:
				</view>
				<view class="cc-change" style="margin-left: 30rpx">
					<block v-if="form.source == '请选择考生类型'">
						<!-- <text style="color: #AAAAB3;">{{form.major}}</text> -->
						<picker
							mode="selector"
							:value="sourceValue"
							:range="sources"
							@change="changeSource"
						>
							<view class="">
								<text style="color: #c0c4cc; font-weight: 400">
									{{ form.source }}
								</text>
								<image src="../../static/image/up.png" mode=""></image>
							</view>
						</picker>
					</block>
					<block v-else>
						<picker
							mode="selector"
							:value="sourceValue"
							:range="sources"
							@change="changeSource"
						>
							<view class="">
								<text>{{ form.source }}</text>
								<image src="../../static/image/up.png" mode=""></image>
							</view>
						</picker>
					</block>
				</view>
			</view>
			<u-line color="#EDEBEB"></u-line>
			<view class="mess-left center-top">
				<view class="mess-left">
					<span style="color: red">*</span>
					意向报考专业:
				</view>
				<view class="cc-change" style="margin-left: 30rpx">
					<block v-if="form.major == '请选择意向报考专业'">
						<!-- <text style="color: #AAAAB3;">{{form.major}}</text> -->
						<!-- <picker mode="multiSelector" :value="hobbyValue" @change="changeType"> -->
						<view class="" @click="handleMultiple(hobbyValue)">
							<text style="color: #aaaab3; font-weight: 400">{{ form.major }}</text>
							<image src="../../static/image/up.png" mode=""></image>
						</view>
						<!-- </picker> -->
					</block>
					<block v-else>
						<!-- <picker mode="selector" :value="hobbyValue" :range="columns" @change="changeType"> -->
						<view class="" @click="handleMultiple(hobbyValue)">
							<text style="color: #283654; font-weight: 400">{{ form.major }}</text>
							<image src="../../static/image/up.png" mode=""></image>
						</view>
						<!-- </picker> -->
					</block>
				</view>
			</view>
			<!-- <u-line color="#EDEBEB"></u-line>
			<view class="message-title required">
				<view class="mess-left">
					其他专业
					 <span>*</span>
				</view>
				<view class="" style="margin-left: 30rpx;">
					<u--input placeholder="请输入其他专业方向" border="none" v-model="form.hobby"></u--input>
				</view>
			</view> -->
			<u-line color="#EDEBEB"></u-line>
			<view class="image_tag">
				<view class="image_title">佐证材料上传要求:</view>
				<view class="">1.艺术类社会考级证书或上海市艺术单项比赛获奖证书。</view>
				<view>2.上海市学生艺术团艺术团员的相关证明材料。</view>
				<view>3.其它获奖需为区级或区级以上荣誉称号证书。</view>
				<view>4.上传材料仅限PDF/JPEG格式。</view>
				<view>5.每人最多上传3份证明材料。</view>
				<view>
					6.请提前准备好PDF/JPEG格式文件，通过微信对话框/文件传输助手，点击➕选择文件上传。
				</view>
			</view>
			<view class="mess-left" style="margin-top: 20rpx">
				<image src="../../static/image/pdf.png" mode=""></image>
				上传PDF/JPEG文件【选填】
			</view>
			<view class="center-img">
				<view class="image_row" v-for="(item, index) in form.file_pdf" :key="index">
					<block>
						<image
							src="../../static/image/pdfsc.png"
							mode=""
							@click="chooseFront"
						></image>
						<text>已上传</text>
						<text style="color: skyblue" @click="chooseFront(item)">重新上传</text>
						<text style="color: red" @click="delImage(item)">删除</text>
					</block>
				</view>
				<view class="add_style" v-if="form.file_pdf.length < 3">
					<block>
						<image
							src="../../static/image/add.png"
							mode=""
							@click="chooseFront"
						></image>
					</block>
				</view>
			</view>
		</view>
		<view class="generate">
			<view class="tips">
				<view @click="yuanze" class="yuan" :id="consent ? 'yuan' : ''"></view>
				<view>
					勾选
					<text @click="toRule" style="color: #0018b6">《用户协议以及隐私条款》</text>
					，即代表同意使用该软件提供的服务。
				</view>
			</view>
			<view class="generate-item" @click="generateOrder">提 交</view>
		</view>
		<multiple-picker
			title="请选择"
			:show="show"
			:selseedNum="selseedNum"
			:columns="columns"
			:defaultIndex="index"
			@confirm="confirmMultiple"
			@cancel="show = false"
			@change="changeMultiple"
		></multiple-picker>
		<!-- 确认弹窗 -->
		<u-popup
			:show="confirmPopupShow"
			:round="30"
			mode="center"
			:mask-click="false"
			@close="closeConfirmPopup"
			:safeAreaInsetBottom="false"
		>
			<view class="success-popup confirm">
				<image class="su-img" src="../../static/image/popup-bg.png" mode=""></image>
				<view class="confirm_content">
					<view class="text">
						已提交报名信息，报名信息提交后不得修改，如有疑问请拨打咨询电话55963421、65797995.
					</view>
					<view class="bottom">
						<!-- <view class="button" @click="closeConfirmPopup"> 取消</view> -->
						<view class="button" @click="closePopup">确认</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup
			:show="noticePopupShow"
			:round="30"
			mode="center"
			:mask-click="false"
			@close="closeNoticePopup"
			:safeAreaInsetBottom="false"
		>
			<view class="success-popup confirm">
				<image class="su-img" src="../../static/image/popup-bg.png" mode=""></image>
				<view class="confirm_content">
					<view class="text  notice_text">
						<view>
							<view class="title">佐证材料上传要求：</view>
							<view class="">1.艺术类社会考级证书或上海市艺术单项比赛获奖证书。</view>
							<view>2.上海市学生艺术团艺术团员的相关证明材料。</view>
							<view>3.其它获奖需为区级或区级以上荣誉称号证书。</view>
							<view>4.上传材料仅限PDF/JPEG格式。</view>
							<view>5.每人最多上传3份证明材料。</view>
							<view>
								6.请提前准备好PDF/JPEG格式文件，通过微信对话框/文件传输助手，点击➕选择文件上传。
							</view>
						</view>
					</view>
					<view class="bottom">
						<!-- <view class="button" @click="closeConfirmPopup"> 取消</view> -->
						<view class="button" @click="closeNoticePopup">我已知晓</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { doPost, doGet } from '@/common/js/common.js';
import { subSignUp } from '@/common/js/http.js';
export default {
	data() {
		return {
			confirmPopupShow: false,
			noticePopupShow: true,
			selseedNum: 1,
			sourceID: undefined,
			form: {
				name: '',
				idcard: '',
				end_school: '',
				school_address: '',
				major: '请选择意向报考专业',
				file_pdf: [],
				examinee_number: '',
				father_mobile: '',
				mother_mobile: '',
				address: '',
				source: '请选择考生类型'
			},
			// show: false,
			columns: [
				{
					label: '中本贯通-学前教育专业（限本市常住户口学生）',
					value: '0'
				},
				{
					label: '中本贯通-录音艺术专业（限本市常住户口学生）',
					value: '1'
				},
				{
					label: '中职-音乐表演专业（现代音乐表演方向/现代音乐制作方向）',
					value: '2'
				}
			],
			// 媒体，报纸，杂志，老师，朋友等
			sources: ['本市常住户口学生', '非本市户口学生', '随迁子女'],
			hobbyValue: [0, 1],
			sourceValue: 0,
			successShow: false,
			fileShow: false,
			show: false,
			index: [],
			consent: false //同意授权
		};
	},
	onLoad() {},
	methods: {
		idcardVaild() {
			if (this.form.idcard.length < 18) {
				uni.showToast({
					title: '身份证信息输入有误',
					icon: 'none',
					duration: 3000
				});
			}
		},
		examineeNumberVaild() {
			if (this.form.idcard.length < 12) {
				uni.showToast({
					title: '中考考生报名号输入有误',
					icon: 'none',
					duration: 3000
				});
			}
		},
		onSub() {
			var that = this;
			if (that.consent == false) {
				uni.showToast({
					title: '未勾选用户隐私协议',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (that.form.name == '') {
				uni.showToast({
					title: '请输入您的姓名',
					icon: 'none'
				});
				return;
			}
			if (that.form.idcard == '') {
				uni.showToast({
					title: '请输入您的身份证号',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (that.form.end_school == '') {
				uni.showToast({
					title: '请输入您的毕业院校',
					icon: 'none'
				});
				return;
			}
			if (that.form.hobby == '') {
				uni.showToast({
					title: '请输入其他专业方向',
					icon: 'none'
				});
				return;
			}
			if (that.form.major == '请选择意向报考专业') {
				uni.showToast({
					title: '请选择您的专业方向',
					icon: 'none'
				});
				return;
			}
			this.confirmPopupShow = true;
		},
		closeConfirmPopup() {
			this.confirmPopupShow = false;
		},
		delImage(value) {
			this.form.file_pdf = this.form.file_pdf.filter(item => item !== value);
		},
		yuanze() {
			this.consent = !this.consent;
		},
		toRule() {
			console.log(2222222);
			uni.navigateTo({
				url: '/pages/rule/rule'
			});
		},
		// toChange() {
		// 	this.show = true
		// },
		handleMultiple(val) {
			if (this.form.source == '请选择考生类型') {
				uni.showToast({
					title: '请先选择考生类型',
					icon: 'none'
				});
				return;
			}
			this.index = val || [];
			this.show = true;
		},
		confirmMultiple(e) {
			console.log(e);
			let temp = [];
			e.selected.forEach(item => {
				temp.push(item.label);
			});
			// if (temp.length < 1) return;
			this.form.major = temp.toString();
			console.log(this.form.major);
			this.hobbyValue = e.value;
			this.show = false;
		},
		changeMultiple(e) {
			console.log(e);
		},
		// changeType(e) {
		// 	console.log(e.detail.value)
		// 	if (e.detail.value == 0) {
		// 		this.form.major = '录音艺术'
		// 	} else if (e.detail.value == 1) {
		// 		this.form.major = '学前教育'
		// 	} else {
		// 		this.form.major = '音乐表演'
		// 	}
		// 	// this.form.major = e.value[0]
		// 	// this.show = false
		// },
		changeSource(e) {
			// console.log(e.detail.value)
			// '媒体', '报纸', '杂志','老师','朋友','其他'
			this.form.major = '请选择意向报考专业';
			console.log(this.form.major, this.sourceID, e.detail.value);
			switch (e.detail.value) {
				case '0':
					this.form.source = '本市常住户口学生';
					this.selseedNum = 3;
					this.columns = [
						{
							label: '中本贯通-学前教育专业（限本市常住户口学生）',
							value: '0'
						},
						{
							label: '中本贯通-录音艺术专业（限本市常住户口学生）',
							value: '1'
						},
						{
							label: '中职-音乐表演专业（现代音乐表演方向/现代音乐制作方向）',
							value: '2'
						}
					];
					break;
				case '1':
					this.form.source = '非本市户口学生';
					this.selseedNum = 1;
					this.columns = [
						{
							label: '中职-音乐表演专业（现代音乐表演方向/现代音乐制作方向）',
							value: '2'
						}
					];
					break;
				case '2':
					this.form.source = '随迁子女';
					this.selseedNum = 1;
					this.columns = [
						{
							label: '中职-音乐表演专业（现代音乐表演方向/现代音乐制作方向）',
							value: '2'
						}
					];
					break;
			}
		},
		closePopup() {
			this.confirmPopupShow = false;
		},
		closeNoticePopup() {
			this.noticePopupShow = false;
		},
		// 身份证校验
		toCheck() {
			// let reg1 = /^(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)$/ //正则表达式定义身份证号正确格式
			let reg1 = /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; //正则表达式定义身份证号正确格式
			if (!this.form.idcard) {
				//判断如果身份证号（this.card)num）为空，提示用户输入身份证号
				uni.showToast({
					title: '请输入身份证号',
					icon: 'none'
				});
				return;
			}
			if (!reg1.test(this.form.idcard)) {
				//判断身份证号格式时候正确
				uni.showToast({
					title: '请输入正确的身份证号',
					icon: 'none'
				});
				return;
			}
		},
		chooseFront(value) {
			console.log(value, '上传土偶按');
			let isAfresh = typeof value === 'string'; //重新上传
			var that = this;
			uni.chooseMessageFile({
				count: 1, // 最多选择一个文件
				type: 'file', // 选择文件类型
				success: res => {
					uni.showLoading({
						title: '正在上传...'
					});
					let filePath = res.tempFiles[0].path;
					uni.uploadFile({
						url: 'https://signup.yfzxzjysg.top/api/upImage',
						filePath: filePath,
						name: 'file', // 在FormData 中文件对应的属性名
						formData: res.tempFiles[0], // 除文件外其他所有数据，传对象，会默认转换为 FormData
						header: {
							Accept: 'application/json',
							'content-type':
								'multipart/form-data; boundary=---011000010111000001101001'
						},
						success: res => {
							uni.hideLoading();
							// console.log(res.data)
							if (JSON.parse(res.data).code == 0) {
								uni.showToast({
									title: '上传成功',
									duration: 2000
								});
							}
							if (isAfresh) {
								that.form.file_pdf = that.form.file_pdf.map(item =>
									item === value ? JSON.parse(res.data).data : item
								);
							} else {
								that.form.file_pdf = that.form.file_pdf.concat(
									JSON.parse(res.data).data
								);
							}
							console.log(that.form.file_pdf);
							that.fileShow = true;
							// var type = 'front'
							// that.identify(that.front_url, type)
						}
					});
				},
				fail(err) {
					uni.hideLoading();
					console.log(err);
				}
			});
		},
		// 确认生成订单
		generateOrder() {
			var that = this;
			if (that.form.name == '') {
				uni.showToast({
					title: '请输入您的姓名',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (that.form.idcard == '') {
				uni.showToast({
					title: '请输入您的身份证号',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (that.form.examinee_number == '') {
				uni.showToast({
					title: '请输入您的中考考生报名号',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (that.form.school_address == '') {
				uni.showToast({
					title: '请输入初中学校所在区县',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (that.form.end_school == '') {
				uni.showToast({
					title: '请输入您的初中学校名称',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (that.form.address == '') {
				uni.showToast({
					title: '请输入通讯地址',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (that.form.father_mobile == '请输入联系人手机号1') {
				uni.showToast({
					title: '请选择您的专业方向',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (that.form.mother_mobile == '请输入联系人手机号2') {
				uni.showToast({
					title: '请选择您的专业方向',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (that.form.major == '请选择意向报考专业') {
				uni.showToast({
					title: '请选择您的专业方向',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			if (that.consent == false) {
				uni.showToast({
					title: '未勾选用户隐私协议',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			// if (that.form.file_pdf == '') {
			// 	uni.showToast({
			// 		title: '请上传pdf',
			// 		icon: 'none'
			// 	})
			// 	return;
			// }
			uni.showModal({
				title: '提示',
				content: '一经提交不得修改,是否确认提交？',
				success: function(res) {
					if (res.confirm) {
						// 用户点击了确定，进行提交操作
						doPost(
							subSignUp,
							{
								name: that.form.name,
								idcard: that.form.idcard,
								end_school: that.form.end_school,
								school_address: that.form.school_address,
								major: that.form.major,
								file_pdf: that.form.file_pdf.join(','),
								examinee_number: that.form.examinee_number,
								father_mobile: that.form.father_mobile,
								mother_mobile: that.form.mother_mobile,
								address: that.form.address,
								source: that.form.source
							},
							res => {
								console.log(res);
								if (res.code == 0) {
									// uni.showToast({
									// 	title: '提交成功',
									// 	duration: 2000
									// });
									that.confirmPopupShow = true;
									that.form = {};
									that.fileShow = false;
									setTimeout(() => {
										that.confirmPopupShow = false;
									}, 9000);
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							}
						);
						console.log('用户点击了确定');
						// 这里执行提交操作
					} else if (res.cancel) {
						// 用户点击了取消
						console.log('用户点击了取消');
					}
				}
			});

			// setTimeout(() => {
			// 	this.form = {}
			// }, 1000)
		}
	}
};
</script>
<style>
page {
	background: #f2f4f5;
	font-size: 28rpx;
	/* color: #919191; */
}
</style>
<style lang="scss" scoped>
.content {
	// padding-bottom: 50rpx;
	// position: relative;
	background-image: url('https://cdn.yfzxzjysg.top/nxcsoft/bg20240314231619.png');
	background-size: cover;
	background-repeat: no-repeat;
	width: 100%;
	height: 620rpx;
}

.cc-title {
	// position: absolute;
	// top: 125rpx;
	// left: 44rpx;
	padding-top: 160rpx;
	margin-left: 44rpx;
	margin-bottom: 56rpx;

	image {
		width: 120rpx;
		height: 120rpx;
		vertical-align: middle;
		margin-right: 18rpx;
	}

	text {
		font-weight: 700;
		font-size: 34rpx;
		color: #ffffff;
	}
}

.user-title {
	// position: absolute;
	// top: 30rpx;
	// margin-top: 56rpx;
	background-color: #f2f4f5;
	width: 84%;
	margin: 0 24rpx;
	background: #fff;
	border-radius: 18rpx;
	padding: 38rpx;
}

.user-top {
	font-weight: 700;
	font-size: 28rpx;
	color: #283654;
	// margin: 40rpx 0 60rpx 18rpx;
	margin-bottom: 25rpx;
	margin-left: -10rpx;
}

.cc-center {
	// position: absolute;
	// top: 50rpx;
	background-color: #f2f4f5;
	width: 84%;
	margin: 33rpx 24rpx 0 24rpx;
	background: #fff;
	border-radius: 18rpx;
	padding: 38rpx;
	padding-bottom: 360rpx;

	.center-top {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0;
	}

	.center-img {
		margin-top: 25rpx;

		image {
			width: 172rpx;
			height: 172rpx;
			vertical-align: middle;
			border-radius: 25rpx;
		}

		text {
			margin-left: 20rpx;
			color: #1cd66c;
			font-weight: 700;
		}
	}

	.cc-change {
		font-size: 28rpx;

		image {
			width: 20rpx;
			height: 15rpx;
			vertical-align: middle;
			margin-left: 24rpx;
			margin-top: 3rpx;
		}
	}
}

.message-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;

	// overflow: hidden;
	image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}
}

.required {
	font-size: 16px;
	color: #333;
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.required span {
	color: red;
	margin-left: 5px;
}

.mess-left {
	font-weight: bold;
	font-size: 26rpx;
	color: #283654;
	// width: 185rpx;
	flex-shrink: 0;

	image {
		width: 32rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-right: 11rpx;
		margin-top: -6rpx;
	}
}

.generate {
	z-index: 999;
	width: 100%;
	// height: 100rpx;
	position: fixed;
	bottom: 6rpx;
	left: 50%;
	color: #fff;
	transform: translateX(-50%);
	padding-top: 20rpx;
	text-align: center;

	background: #fff;

	.generate-item {
		background: linear-gradient(90deg, #5dbdfe, #40b1fe);
		border-radius: 30rpx;
		width: 650rpx;
		height: 80rpx;
		font-size: 26rpx;
		line-height: 80rpx;
		margin: auto;
		margin-top: 20rpx;
		margin-bottom: 90rpx;
	}
}

.success-popup {
	width: 486rpx;
	height: 480rpx;
	// background: #508ED4;
	z-index: 999;
	// padding: 30rpx 20rpx;
	border-radius: 20rpx;
	text-align: center;
	position: relative;

	.su-img {
		width: 486rpx;
		height: 602rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: -130rpx;
		z-index: 99;
	}
}

.tips {
	color: #979797;
	font-size: 26rpx;
	line-height: 40rpx;
	text-align: center;
	display: flex;
	margin-left: 40rpx;
}

.yuan {
	width: 36rpx;
	height: 30rpx;
	border-radius: 15rpx;
	border: 1px solid #44b3fe;
	margin-right: 10rpx;
	display: inline-block;
	margin-bottom: -8rpx;
	/* margin-left: 30rpx; */
}

#yuan {
	background-image: url(/static/image/round_check.png);
	background-size: 100%;
	width: 36rpx;
	height: 30rpx;
	border: 0;
}

.image_row {
	margin-bottom: 20rpx;
}

.image_tag {
	color: #283654;
	line-height: 1.6;
	margin-top: 20rpx;
	font-size: 24rpx;
}

.image_title {
	font-size: 28rpx;
	font-weight: 600;
}

.confirm {
	position: relative;

	.confirm_content {
		position: absolute;
		z-index: 999;
		height: 100%;
		display: flex;
		width: 100%;
		flex-direction: column;

		.text {
			flex: 1;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 70rpx 44rpx 0;
			line-height: 2;
			overflow-y: auto;
		}
		.notice_text {
			margin-top: 70rpx;
			box-sizing: border-box;
			padding: 320rpx 20rpx 0;
			width: 100%;
			text-align: left;
			.title {
				font-weight: 600;
			}
		}

		.bottom {
			display: flex;
			justify-content: space-around;
			margin-bottom: 50rpx;
			padding-top: 20rpx;
			flex-shrink: 0;
			.button {
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 30rpx;
				width: 40%;
				background: #40b1fe;
				color: #fff;
			}
		}
	}
}
</style>
